import React, { useEffect, useState } from 'react';
import GopherProps from '../objects/internal/GopherProps';
import { Divider, Form, Input, Modal, Spin } from 'antd';
import { useTranslation } from 'react-i18next';
import AsyncRoleSelector from './AsyncRoleSelector';
import { StaffForm } from '../pouch/models/Staff';

const {TextArea} = Input;

export interface StaffEditProps extends GopherProps {
	visible: boolean;
	setVisibility: (x: boolean) => void;

	onOperationDone?: () => void;
	onCancel?: () => void;

	id?: string;
}

export default function StaffEditDialog(props: StaffEditProps) {
	const {t} = useTranslation();
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [loadedForm, setLoadedForm] = useState<StaffForm | undefined>(undefined);
	const [role, setRole] = useState('');

	const submitDialog = () => {
		if (!loading) {
			const x = form.getFieldsValue() as StaffForm;
			setLoading(true);
			x.role = role; // strange haxx, but have to do
			console.log(x);
			let promise;
			if (props.id) {
				// update
				x._id = props.id;
				promise = props.gopher.updateStaff(props.id, x);
			} else {
				// create
				promise = props.gopher.addStaff(x);
			}
			promise.then(() => {
				setLoading(false);
				props.setVisibility(false);
				if (props.onOperationDone) {
					props.onOperationDone();
				}
			});
		}
	};

	const clearDialog = () => {
		if (props.onCancel) {
			props.onCancel();
		}
		props.setVisibility(false);
	};

	useEffect(() => {
		if (props.visible) {
			if (loadedForm != null) {
				form.setFieldsValue(loadedForm);
			}
		}
	}, [form, loadedForm, props.visible]);

	useEffect(() => {
		if (props.id) {
			console.log(`editing ${props.id}`);
			setLoading(true);
			props.gopher.getStaff(props.id).then(staff => {
				if (staff) {
					staff.password = '';
				}
				setLoadedForm(staff);
				setRole(staff?.role || '');
				setLoading(false);
				console.log('role is', staff?.role);
			});
		} else {
			console.log('create new');
		}
	}, [props.id, props.gopher, form]);

	return (
		<Modal title={t('modal-staff-edit')} visible={props.visible} confirmLoading={loading} onOk={submitDialog}
			   onCancel={clearDialog}>
			<Form form={form} autoComplete={'off'}>
				{loading ? <Spin/> : (
					<>
						<Form.Item label={t('label-username')} name={'username'}>
							<Input autoComplete={'false'}/>
						</Form.Item>
						<Form.Item label={t('label-display-name')} name={'displayName'}>
							<Input autoComplete={'false'}/>
						</Form.Item>
						<Form.Item label={t('label-gender')} name={'gender'}>
							<Input autoComplete={'false'}/>
						</Form.Item>
						<Form.Item label={t('label-role')} name={'role'}>
							<AsyncRoleSelector gopher={props.gopher} onValueChange={setRole} value={role} />
						</Form.Item>
						<Form.Item label={t('label-notes')} name={'notes'}>
							<TextArea autoSize autoComplete={'false'}/>
						</Form.Item>
						<Divider/>
						<Form.Item label={t('label-password')} name={'password'}>
							<Input type={'password'} placeholder={t('tip-change-password')} autoComplete={'false'}/>
						</Form.Item>
					</>
				)}
			</Form>
		</Modal>
	);
}
